import Taro, {Component} from '@tarojs/taro'
import {Picker, View, ScrollView} from '@tarojs/components'
import {AtButton, AtCard, AtModal, AtMessage} from 'taro-ui'
import moment from 'moment';
import {listEmployeeOverWork, deleteOverWorkById} from './service'
import {approveStatusList} from '../../constant'
import './index.scss'

export default class attendance extends Component {

  config = {
    navigationBarTitleText: '加班申请查询',
  };

  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      date: moment(new Date()).format('YYYY-MM'),
      id: null,
      isOpen: false
    }
  }

  componentWillMount() {

  }

  componentDidShow () {
    this.initList();
  }

  componentDidMount() {
  }

  initList(date = this.state.date) {
    listEmployeeOverWork(date).then(res => {
      this.setState({dataList: res.list});
    })
  }

  onTimeChange(e) {
    this.setState({date: e.detail.value});
    this.initList(e.detail.value);
  }

  turnToApply(applyData) {
    let url = '/pages/overtime/apply/index';
    let {checkUrl, ...restData} = applyData;
    if (restData){
      restData.overworkBeginTime = restData.overworkBeginTime ? moment(restData.overworkBeginTime).format('YYYY-MM-DD HH:mm') : null;
      restData.startDate = restData.overworkBeginTime ? moment(restData.overworkBeginTime).format('YYYY-MM-DD') : null;
      restData.startTime = restData.overworkBeginTime ? moment(restData.overworkBeginTime).format('HH:mm') : null;
      restData.overworkEndTime = restData.overworkEndTime ? moment(restData.overworkEndTime).format('YYYY-MM-DD HH:mm') : null;
      restData.endDate = restData.overworkEndTime ? moment(restData.overworkEndTime).format('YYYY-MM-DD') : null;
      restData.endTime = restData.overworkEndTime ? moment(restData.overworkEndTime).format('HH:mm') : null;
      url += '?applyData='+JSON.stringify(restData);
    }
    Taro.navigateTo({ url })
  }

  showDelModal = (id) => {
    this.setState({isOpen: true, id})
  };

  handleCancel = () => {
    this.setState({isOpen: false, id: null})
  };

  handleConfirm = () => {
    const { id } = this.state;
    deleteOverWorkById(id).then(res => {
      if (res.flag){
        this.handleCancel();
        this.initList();
        Taro.atMessage({message: '删除成功！', type: 'success'})
      }
    })
  };

  render() {
    return (
      <View>
        <AtMessage />
        <View className='topBar'>
          <Picker mode='date' fields='month' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
            <View className='picker'>
              {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
            </View>
          </Picker>
          <AtButton type='primary' size='small' onClick={this.turnToApply}>新增</AtButton>
        </View>
        <ScrollView
          className='scrollView'
          scrollY
          scrollWithAnimation
        >
          {
            this.state.dataList &&
            this.state.dataList.map((item, index) => (
              <View className='card' key={index} style='margin: 15pt 0'>
                <AtCard
                  title={approveStatusList.find(statusItem => statusItem.value === item.satus).label}
                >
                  <View className='card-content'>
                    <View className='contentItem'>
                      <View>开始时间:</View>
                      <View>{item.overworkBeginTime && moment(item.overworkBeginTime).format('YYYY-MM-DD')}</View>
                    </View>
                    <View className='contentItem'>
                      <View>结束时间:</View>
                      <View>{item.overworkEndTime && moment(item.overworkEndTime).format('YYYY-MM-DD')}</View>
                    </View>
                    <View className='contentItem'>
                      <View>时长:</View>
                      <View>{item.overworkTotalTime}小时</View>
                    </View>
                  </View>
                  <View className='card-btnBar'>
                    <View className='btn' onClick={() => this.showDelModal(item.id)}>删除</View>
                    <View className='btn border' onClick={() => this.turnToApply(item)}>修改</View>
                    <View className='btn'>发起</View>
                  </View>
                </AtCard>
              </View>
            ))
          }
        </ScrollView>

        <AtModal
          isOpened={this.state.isOpen}
          title='提示'
          cancelText='取消'
          confirmText='确认'
          onCancel={ this.handleCancel }
          onConfirm={ this.handleConfirm }
          content='是否确认删除此申请？'
        />
      </View>
    )
  }
}
